<template>
    <div>
        <div class="navs"></div>
        <div class="nav">
            <div class="navlelft">
                <div class="navtop">
                    <div>
                        <img @click="fun" src="https://gw.alicdn.com/imgextra/i3/O1CN01FwoEqt20BUGQQRQCW_!!6000000006811-2-tps-72-72.png"
                            alt="">
                        <img src="https://gw.alicdn.com/imgextra/i4/O1CN01fj1tsu1bt7hI3ZE5R_!!6000000003522-2-tps-131-63.png"
                            alt="">
                        <img src="https://gw.alicdn.com/imgextra/i3/O1CN01ZUgqdz1rda6qhEMho_!!6000000005654-2-tps-108-54.png"
                            alt="">
                        <img src="https://gw.alicdn.com/imgextra/i2/O1CN01kNNgRc2A4IIBYokxR_!!6000000008149-2-tps-107-54.png"
                            alt="">
                    </div>
                    <img src="https://gw.alicdn.com/imgextra/i4/O1CN015YYXJp1Jc1kFXqWL9_!!6000000001048-2-tps-144-72.png"
                        alt="">
                </div>
                <div class="navbt">
                    <div class="search" @click="tosearch">
                        <div>
                            <img src="https://gw.alicdn.com/imgextra/i4/O1CN019IqEcn1Zx7pmMMWqK_!!6000000003260-2-tps-54-54.png"
                                alt="">
                            <span>{{ searcharr[searchindex] }}</span>
                        </div>
        
                        <span>搜索</span>
                    </div>
                </div>
            </div>
            <img src="https://gw.alicdn.com/imgextra/i1/O1CN01dLbZO41ROIvdwEL7I_!!6000000002101-2-tps-372-372.png_140x10000.jpg_.webp"
                alt="">
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            searcharr: ["法院拍卖房产", "法院拍卖车", "手机法拍", "银行清仓", "特价奢侈品", "艺术品", "政府国资"],
            searchindex: 0,
            search: ""
        }
    },
    methods:{
        fun(){
            this.$router.push("/")
        },
        tosearch(){
            this.$router.push("/mysearch")
        }
    },
    mounted() {
        setInterval(() => {
            this.searchindex++
            if (this.searchindex == 7) {
                this.searchindex = 0
            }
        }, 2500)
    }
}
</script>

<style scoped>
.navs{
    width: 100%;
    height: 80px;
}
.nav{
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    height: 80px;
    background: url(https://gw.alicdn.com/imgextra/i2/O1CN01QBiKQY1FquEc8Cul6_!!6000000000539-2-tps-1125-372.png_790x10000.jpg_.webp) no-repeat;   
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
}
.nav>img{
    width: 64px;
    height: 64px;

}
.nav .navlelft{
    flex: 1;
    display: flex;
    height: 80px;
    flex-direction: column;
}
.navlelft .navtop{
    width: 100%;
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navtop div{
    display: flex;
}

.navtop div img:nth-child(1){
    width: 24px;
    height: 24px;

}
.navtop div img:nth-child(2) {
    width: 43px;
    height: 21px;
    margin-left: 5px;
    padding-right: 18px;
}
.navtop div img:nth-child(3) {
    width: 35px;
    height: 18px;
    padding-right: 18px;
}
.navtop div img:nth-child(4) {
    width: 35px;
    height: 18px;
    padding-right: 18px;
}
.navtop>img{
    width: 48.3px;
    height: 24.1px;
    margin-right: 15px;
}
.navlelft .navbt{
    flex: 1;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
}
.search {
    width: 97%;
    margin-right: 3%;
    height: 30px;
    border-radius: 15px;
    position: relative;
    z-index: 100;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-between;
    border: 1px solid #eb0045;
}

.search div {
    flex: 1;
    display: flex;
    align-items: center;
}

.search div span {
    font-size: 13px;
    color: #666666;
    margin: 0 10px 0 7px;
    font-weight: bold;
}

.search div img {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    vertical-align: middle;
}

.search>span {
    width: 54px;
    height: 24px;
    margin: 3px 3px;
    border-radius: 12px;
    font-size: 13px;
    color: #EE1851;
    text-align: center;
    line-height: 24px;
    background: rgba(235, 0, 69, .1);
}
</style>